Liveclicker allows you to create custom Liveclicker appearances using CSS. Custom appearances can be applied to LiveReveals with Landing Page Experience selected.
Create a Custom CSS
There are 2 ways in which a new CSS can be configured:
From the Account Settings
1. To configure a new CSS, go to the Account Settings in the top menu, and then navigate to Realtime Content > LiveReveal:
2. Click Add New +. A Window is loaded in which the proposed CSS code can be edited.
4. Start by naming the appearance.
5. Make the necessary changes in the CSS.
6. When done, click Add LiveReveal Appearance. The custom CSS can now be used in your LiveReveal elements.
From the Liveclicker campaign
1. In the Landing Page settings, click on the appearance drop-down and select Create new custom appearance or click the Gear icon (this will take you to the Code Editor to create one).
2. Name your Custom Appearance. The CSS code editor is displayed.
3. Insert your custom CSS, and click the Save button.
4. A preview is displayed on the left.
Landing page HTML Markup
Following is an overview of the different CSS elements in the LiveReveal.
Before scratching:
After scratching:
Adding a secondary text link (link to a disclaimer)
Using a custom appearance and including the custom CSS variables shown below, we're able to show a secondary link on the LiveReveal landing page:
.lc-variables {
secondary-link-href: "http://www.mysite.com/mydisclaimer.html";
secondary-link-text: "See exclusions. Click here";
}If the CSS variables are not found in the custom appearance, no secondary link will be shown.
Copy to clipboard link (for personalized LiveReveals)
For personalized LiveReveals only, a copy to the clipboard link will be shown. This will allow users to quickly copy and paste a promotional code or another piece of textual information. If you wish to hide this link, add the following CSS to your custom appearance:
a.copy-to-clipboard { display: none }
